.chat_container {
    position: relative;
    font-size: 0.3rem;
    color: #353535;
    margin-bottom: 0.2rem;

    .item_from,
    .item_to {
        position: relative;
        width: 100%;
        display: flex;
        margin-top: 0.3rem;

        .avatar {
            position: relative;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 0.1rem;

            img {
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 0.1rem;
                overflow: hidden;
            }
        }
    }

    .item_from {
        .from_main {
            width: 8.06rem;
            margin-left: 0.3rem;
        }
    }

    .item_to {
        justify-content: flex-end;
    }

    .from_main,
    .to_main {
        width: 8.06rem;

        .show_last_date {
            width: 100%;
            height: 0.8rem;
            text-align: center;
            line-height: 0.8rem;
            font-size: 0.26rem;
            color: #999;
        }
    }

    .from_content,
    .to_content {
        position: relative;
        display: inline-block;
        max-width: 8.06rem;
        box-sizing: border-box;
        padding: 0.15rem;
        line-height: 0.5rem;
        border-radius: 0.14rem;

        &::before {
            content: "";
            position: absolute;
            z-index: 1;
            top: 0.2rem;
            width: 0;
            height: 0;
            border: 0.2rem solid transparent;
        }
    }

    .from_content {
        background-color: #fff;

        &::before {
            left: -0.38rem;
            border-right-color: #fff;
        }
    }

    .to_main {
        margin-right: 0.3rem;

        .to_content {
            background-color: #23d96e;
            float: right;

            &::before {
                right: -0.38rem;
                border-left-color: #23d96e;
            }
        }

        .show_last_date {
            float: right;
        }
    }
}
